import React, {useEffect, useState} from 'react';
import {Button, Col, Form, Input, Modal, Row, Select,} from 'antd';
import {formInputRules, formTextAreaRules} from '@/utils/rules';
import {addOrModifyEmTask, queryEmTaskById, getCommandGroupList} from '@/services/emergency';
import {filterEmpty} from '@/utils/methods';
import {useRequest} from "ahooks";
import {TaskPriorityMap} from "@/enums/emergency/map";

const PlanTaskModal: React.FC<any> = ({taskId, planId, dispatch, onSuccess, ...props}: any) => {
  const [form] = Form.useForm();
  const [concactOptions, setConcactOptions] = useState([]);

  const {
    run: runSubmit,
    loading: loadingSubmit
  } = useRequest((values) => {
    const params: any = filterEmpty({
      originValues: values,
      keepEmpty: true,
    });
    taskId && (params.id = taskId);
    params.pid = planId;
    params.taskType = 0;
    return addOrModifyEmTask({})
  }, {
    manual: true,
    onSuccess(res: any) {
      onSuccess && onSuccess(res);
    }
  })
  const {
    run: runDetail,
  } = useRequest(() => {
    return queryEmTaskById({
      id: taskId
    }).then((res: any) => {
      form.setFieldsValue({
        title: res.title,
        timeLimit: res.timeLimit,
        taskPriority: res.taskPriority.toString(),
        description: res.description,
        emContactPersonId: res.emContactPersonId,
      });
      return res;
    })
  }, {
    manual: true,
  })

  const {
    run: runConcact,
    loading: loadingConcact,
  } = useRequest(() => {
    return getCommandGroupList({
      current: 1,
      size: 2000,
      planId: planId,
    })
  }, {
    manual: true,
    onSuccess(res: any) {
      if (res && res.records && res.records.length) {
        const options = res.records.map((item: any) => ({
          value: item.id,
          label: item.name,
        }));
        setConcactOptions(options);
      }
    }
  })
  useEffect(() => {
    if (props.open) {
      taskId && runDetail();
      planId && runConcact();
    } else {
      form.resetFields();
    }
  }, [props.open]);
  return (
    <Modal
      {...props}
      onCancel={() => {
        dispatch({
          clear: true,
          open: false
        })
      }}
      footer={[
        <Button key="cancel" onClick={() => {
          dispatch({
            clear: true,
            open: false
          })
        }}>
          关闭
        </Button>,
        <Button
          type="primary"
          key="submit"
          onClick={async () => {
            const value: any = await form.validateFields()
            runSubmit(value)
          }}
          loading={loadingSubmit}
        >
          保存
        </Button>,
      ]}
    >
      <Form form={form} labelCol={{span: 7, offset: 0}}>
        <div style={{paddingLeft: '12px'}}>
          <Form.Item
            name="title"
            label="任务名称"
            labelCol={{span: 3}}
            rules={[
              ...formInputRules,
              {
                required: true,
                message: '请填写任务名称',
              },
            ]}
          >
            <Input/>
          </Form.Item>
        </div>
        <Row gutter={24}>
          <Col span={12}>
            <Form.Item
              label="联系人"
              name="emContactPersonId"
              rules={[
                {
                  required: true,
                  message: '请选择联系人',
                },
              ]}
            >
              <Select placeholder="请选择联系人" loading={loadingConcact} options={concactOptions}/>
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name="taskPriority"
              label="任务优先级"
              rules={[
                {
                  required: true,
                  message: '请选择任务优先级',
                },
              ]}
            >
              <Select placeholder="请选择" options={TaskPriorityMap.toOption()}/>
            </Form.Item>
          </Col>
        </Row>
        <div style={{paddingLeft: '12px'}}>
          <Form.Item
            name="description"
            label="任务描述"
            labelCol={{span: 3}}
            rules={[
              ...formTextAreaRules,
              {
                required: true,
                message: '请填写任务描述',
              },
            ]}
          >
            <Input.TextArea/>
          </Form.Item>
        </div>
      </Form>
    </Modal>
  );
}

export default PlanTaskModal;
